import React from 'react'
import styled from 'styled-components'
import CardsImage from './cards.svg';
import BackImage from './cardback.jpg';
// CardsImage size is 936 x 440
const CARD_WIDTH = 72;    // 936 / 13
const CARD_HEIGHT=110;    // 440 / 4

type PlayingCardProps = {
  showBack?: boolean;
  $row: number,
  $col: number;
}

const Wrapper = styled.div<PlayingCardProps>`
  width: ${CARD_WIDTH}px;
  height: ${CARD_HEIGHT}px;
  background: white;
  border: 2px solid black;
  border-radius: 8px;
  overflow: hidden;
  position: relative;

  & img.face {
    position: absolute;
    left: ${props => `-${props.$col * 72}px`};
    top: ${props => `-${props.$row * 110}px`};
  }
`

export const PlayingCard: React.FC<PlayingCardProps> = (props) => {
  return (
    <Wrapper {...props} >
    { !!props.showBack ?
      <img src={BackImage} width="100%" height="100%" alt="back" />
      :
      <img className="face" src={CardsImage} alt="card" />
    }
    </Wrapper>
  )
}
